
<template>
  <div>
    <Card title="机构等级评定项管理" ref="card">
      <a href="#" slot="extra" @click.prevent="GetOrgAssessType">刷新</a>
      <Row>
        <Col :span="4">
          <Button size="large" type="primary" icon="ios-add" v-on:click="AddCom">新增评定项</Button>
        </Col>
        <Col :span="4">
          <Upload action :before-upload="handleBeforeUpload" accept=".xls, .xlsx">
            <Button
              size="large"
              type="primary"
              icon="ios-cloud-upload-outline"
              :loading="uploadLoading"
              @click="ImportNoProjectDo"
            >导入评定项</Button>
          </Upload>
        </Col>
      </Row>
    </Card>
    <Modal :mask-closable="false"  v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{typeName}}</span>
      </p>
      <Form ref="formItem" :model="tempCom" :label-width="80" :rules="ruleValidate">
        <FormItem label="一级类别" prop="ParentType">
          <Input v-model="tempCom.ParentType"></Input>
        </FormItem>
        <FormItem label="二级类别" prop="ParentType2">
          <Input v-model="tempCom.ParentType2"></Input>
        </FormItem>
        <FormItem label="三级类别" prop="ParentType3">
          <Input v-model="tempCom.ParentType3"></Input>
        </FormItem>
        <FormItem label="编号" prop="NoStr">
          <Input v-model="tempCom.NoStr"></Input>
        </FormItem>
        <FormItem label="项目内容" prop="Name">
          <Input v-model="tempCom.Name" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
        </FormItem>

        <FormItem label="分值标准" prop="MaxScore">
          <Input type="number" v-model="tempCom.MaxScore"></Input>
        </FormItem>
        <FormItem label="操作说明" prop="AssessDesc">
          <Input v-model="tempCom.AssessDesc"></Input>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="primary" :loading="loadSave" size="large" @click="SaveOrgAssessType">保存</Button>
      </div>
    </Modal>

    <Table
      class="margin-top-10"
      border
      :loading="loading"
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import excel from "@/libs/excel";
import {
  GetOrgAssessType,
  SaveOrgAssessType,
  DeleteOrgAssessType,
  ImportOrgAssessType
} from "@/api/org";
const validateSequence = (rule, value, callback) => {
  let regNum = /^[0-9]+.?[0-9]*$/;
  if (value === "") {
    callback(new Error("不能为空"));
  } else if (!regNum.test(value)) {
    callback(new Error("不能为负数"));
  } else {
    callback();
  }
};
export default {
  name: "orgassesstype",
  data() {
    return {
      file: null,
      loading:false,
      uploadLoading: false,
      loadSave: false,
      tableHeight: 450,
      modal2: false,

      tableTitle: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.tempCom = params.row;
                    this.typeName = "修改等级评定项";

                    this.modal2 = true;
                  }
                }
              },
              "修改"
            );
          }
        },
        {
          title: "一级类别",
          key: "ParentType",
          align: "center",
          width: 200
        },
        {
          title: "二级类别",
          key: "ParentType2",
          align: "center",
          width: 200
        },
        {
          title: "三级类别",
          key: "ParentType3",
          align: "center",
          width: 200
        },
        {
          title: "项目内容",
          align: "center",
          key: "Name",
          minWidth: 200
        },
        {
          title: "操作说明",
          align: "center",
          key: "AssessDesc",
          width: 200
        },
        {
          title: "分值标准",
          align: "center",
          key: "MaxScore",
          width: 100
        },
        {
          title: "排序",
          align: "center",
          key: "OrderIndex",
          width: 80
        }
      ],
      tableData: [],
      typeName: "新增等级评定项",
      tempCom: {
        Gid: "",
        Name: "",
        MaxScore: 1
      },
      ruleValidate: {
        Name: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleBeforeUpload(file) {
      const fileExt = file.name
        .split(".")
        .pop()
        .toLocaleLowerCase();
      if (fileExt === "xlsx" || fileExt === "xls") {
        this.readFile(file);
        this.file = file;
      } else {
        this.$Notice.warning({
          title: "文件类型错误",
          desc:
            "文件：" +
            file.name +
            "不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。"
        });
      }
      return false;
    },
    // 读取文件
    readFile(file) {
      var vm = this;
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onloadstart = e => {
        this.uploadLoading = true;
      };
      reader.onprogress = e => {};
      reader.onerror = e => {
        this.uploadLoading = false;
        this.$Message.error("文件读取出错");
      };
      reader.onload = e => {
        // this.$Message.info("文件读取成功");
        const data = e.target.result;
        this.uploadLoading = false;
        const { header, results } = excel.read(data, "array");
        this.ImportOrgAssessType(results);
      };
    },
    clearCom() {
      this.typeName = "新增等级评定项";
      this.tempCom = {
        Gid: "",
        Name: "",
        MaxScore: 1,
        AssessDesc: "现场查看"
      };
    },
    AddCom() {
      this.clearCom();
      this.modal2 = true;
    },
    GetOrgAssessType() {
      let vm = this;
      vm.loading=true;
      GetOrgAssessType().then(res => {
         vm.loading=false;
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveOrgAssessType() {
      let vm = this;
      this.$refs["formItem"].validate(valid => {
        if (valid) {
          vm.loadSave = true;
          SaveOrgAssessType(this.tempCom).then(res => {
            vm.loadSave = false;
            const data = res.data;
            if (data.Type == 1) {
              vm.modal2 = false;
              vm.clearCom();
              vm.GetOrgAssessType();
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        }
      });
    },
    ImportOrgAssessType(list) {
      ImportOrgAssessType(list).then(res => {
        this.uploadLoading = false;
        const data = res.data;
        if (data.Type == 1) {
          this.$Message.success("导入成功");
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    }
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 160;
    this.GetOrgAssessType();
  }
};
</script>
